<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <!--<link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css"  media="screen,projection"/>-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <style type="text/css">
        body {
            background-color: whitesmoke;
        }
        .nav-left{
            padding-left: 82px;
        }
        nav{
            position: fixed;
            top: 0px;
            z-index: 5;
        }
        #logo{
            padding-left: 18px;
        }
        #sidenav-overlay{
            z-index: 0;
        }
    </style>
    <title>编辑个人中心</title>
</head>
<body>
<nav>
    <div class="nav-wrapper blue">
        <a href="/toInformation" class="brand-logo" id="logo">呜呼</a>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="hide-on-med-and-down " style="margin-left: 82px">
            <li><a href="/toIndex">首页</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">话题</a></li>
            <li><a href="/toWriteQuestion">提问</a></li>
        </ul>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="/toContact"><i class="material-icons">chat_bubble_outline</i></a></li>
            <li><a href="/toPersonalCenter"><i class="material-icons">perm_identity</i></a></li>
            <li><a href="#"><i class="material-icons">more_vert</i></a></li>
        </ul>
        <ul class="side-nav" id="mobile-demo" style="z-index: 10000">
            <li><a href="/toIndex">首页</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">话题</a></li>
            <li><a href="/toWriteQuestion">提问</a></li>
            <li><a href="/toContact">联系人</a></li>
            <li><a href="/toPersonalCenter">个人中心</a></li>
            <li><a href="#">设置</a></li>
        </ul>
    </div>
</nav>
<div class="container" style="margin-top: 100px;">
    <!--第一部分用来放置头像-->
    <div class="row">
        <div class="col l3 s12">
            <div class="card" style="z-index: 1;">
                <div class="card-image hoverable">
                    <img class="responsive-img" src="../../public/img/1.jpg">
                    <span class="card-title">头像</span>
                    <a class="waves-effect waves-light blue right btn-floating" style="margin-top: -40px;"><i
                            class="material-icons tiny">mode_edit</i></a>
                </div>
            </div>
        </div>
        <input type="file" accept="image/png,image/jpeg" style="display: none;">
    </div>
    <div class="card" style="height: 150%; margin-top: -10%;">
        <!--这里这个input需要通过js来调用-->

        <!--第二部分用来放置其他信息 这部分放在头像的下面-->
        <div class="row">
            <form class="col offset-s1 s12">
                <div class="input-field">
                    <div class="row">
                        <h5 style="display: inline" class="col s2">昵称</h5>
                        <div id="name">
                            <span style="display: inline;margin-top: 15px" class="col s7 offset-s1">样例</span>
                            <a class="waves-effect waves-light btn-flat col s2 pull-s1" style="position: absolute;"
                               onclick="modifyfunc('name');"><i class="tiny material-icons">mode_edit</i>修改</a>
                        </div>

                    </div>
                </div>
            </form>
            <div class="row">
                <li class="divider grey col s12 offset-s1" style="width: 82%;"></li>
            </div>

            <form class="col offset-s1 s12">
                <div class="input-field">
                    <div class="row">
                        <h5 style="display: inline" class="col s2">密码</h5>
                        <div id="pwd">
                            <span style="display: inline;margin-top: 15px" class="col s7 offset-s1">样例</span>
                            <a class="waves-effect waves-light btn-flat col s2 pull-s1" style="position: absolute;"
                               onclick="modifyfunc('pwd')"><i class="tiny material-icons">mode_edit</i>修改</a>
                        </div>

                    </div>
                </div>
            </form>
            <div class="row">
                <li class="divider grey col s12 offset-s1" style="width: 82%;"></li>
            </div>
            <form class="col offset-s1 s12">
                <div class="input-field">
                    <div class="row">
                        <h5 style="display: inline" class="col s2">确认密码</h5>
                        <div id="secpwd">
                            <span style="display: inline;margin-top: 15px" class="col s7 offset-s1">样例</span>
                            <a class="waves-effect waves-light btn-flat col s2 pull-s1" style="position: absolute;"
                               onclick="modifyfunc('secpwd')"><i class="tiny material-icons">mode_edit</i>修改</a>
                        </div>
                    </div>
                </div>
            </form>
            <div class="row">
                <li class="divider grey col s12 offset-s1" style="width: 82%;"></li>
            </div>

            <form class="col offset-s1 s12">
                <div class="input-field">
                    <div class="row">
                        <h5 style="display: inline" class="col s2">性别</h5>
                        <div id="sex">
                            <span style="display: inline;margin-top: 15px" class="col s7 offset-s1">样例</span>

                            <!--<input style="margin-top: 15px" class="col s5 offset-s1">-->
                            <!--<a class="waves-effect waves-light btn col s1" style="position: absolute;"-->
                               <!--onclick="ret(+idname+)">确认</a>-->
                            <!--<a class="waves-effect waves-light btn col s1 offset-s1" style="position: absolute;"-->
                               <!--onclick="ret(+idname+)">取消</a>-->

                            <a class="waves-effect waves-light btn-flat col s2 pull-s1" style="position: absolute;"
                               onclick="modifyfunc('sex')"><i class="tiny material-icons">mode_edit</i>修改</a>
                        </div>

                    </div>
                </div>
            </form>
            <div class="row">
                <li class="divider grey col s12 offset-s1" style="width: 82%;"></li>
            </div>
            <form class="col offset-s1 s12">
                <div class="input-field">
                    <div class="row">
                        <h5 style="display: inline" class="col s2">个性签名</h5>
                        <div id="signature">
                            <span style="display: inline;margin-top: 15px" class="col s7 offset-s1">样例</span>
                            <a class="waves-effect waves-light btn-flat col s2 pull-s1" style="position: absolute;"
                               onclick="modifyfunc('signature')"><i class="tiny material-icons">mode_edit</i>修改</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--<script type="text/javascript" src="materialize/js/materialize.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script>
    $(document).ready(function () {

    });
    var modifyfunc = function (idname) {
        alert(idname);
        $("#" + idname).html("<input style=\"margin-top: 15px\" class=\"col s5 offset-s1\">\n" +
            "                            <a class=\"waves-effect waves-light btn col s1\" style=\"position: absolute;\" onclick=\"ret("+"'"+idname+"'"+")\">确认</a>\n" +
            "                            <a class=\"waves-effect waves-light btn col s1 offset-s1\" style=\"position: absolute;\" onclick=\"ret("+"'"+idname+"'"+")\">取消</a>");
    };

    var ret = function (idname) {
        alert(idname);
        $("#" + idname).html("<span style=\"display: inline;margin-top: 15px\" class=\"col s7 offset-s1\">样例</span><a class=\"waves-effect waves-light btn-flat col s2 pull-s1\" style=\"position: absolute;\"\n" +
            "                               onclick=\"modifyfunc("+"'"+idname+"'"+")\"><i class=\"tiny material-icons\">mode_edit</i>修改</a>")
    };
</script>
<script>
    $(document).ready(function(){
        $("#sidenav").sideNav();
        $(".button-collapse").sideNav({draggable: true});
        $("#leftnavbar").on("click",function () {
            $('.button-collapse').sideNav('hide');
        });
    });
</script>
</body>
</html>